<div class="menu-item-group" [style.background-color]="bgColor"
     [ngClass]="{'leaf-node': item.leaf_node, 'active': item.active}">
  <div class="menu-item" (click)="menuItemClick()">
    <a class="menu-text" *ngIf="item.link" [ngClass]="{'font-weight-bold': item.bold }" tabindex="-1"
       [routerLink]="item.link">
      <span class="{{ item.css_icon }}"></span>
      {{item.name }}
    </a>
    <span class="menu-text" *ngIf="!item.link" [ngClass]="{'font-weight-bold': item.bold }">
      <span class="{{ item.css_icon }}"></span>
      {{ item.name }}
    </span>
  </div>
  <div class="menu-item-children" [@heightSpreadState]="stateExpression">
    <ng-container *ngIf="item.expandable">
      <ng-container *ngFor="let sub of item.sub_menu">
        <app-menu-item [item]="sub" [backgroundColor]="bgColor"></app-menu-item>
      </ng-container>
    </ng-container>
  </div>
</div>
